<script setup>
import KOfooter from '@/components/KOfooter/KOfooter.vue';
import KOheader from '@/components/KOheader/KOheader.vue';

import {ref,onMounted,watch} from "vue"
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize);
</script>

<template>
  <div class="POOL">
    <KOheader/>
    <div v-if="innerWidth">
      <div style="background-color: #c3cad4; width: 100%; height: 600px; margin-top: 40px;">
      <div style="width: 50%; position: relative; left: 25%; top: 30%; font-size: 55px; font-weight: 700;">成為分店，挑戰無限可能。</div>
      <div style="width: 50%; font-weight: 700; font-size: 26px; position: relative; left: 25%; top: 35%;">每月只需 NT$ 780 起，可隨時取消。</div>
      <div style="width: 50%; display: flex; position: relative; left: 25%; top: 39%; height: 50px; ">
        <button style="width: 160px; border-radius: 25px; color: #fff; background-color: #000;">立即成為分店</button>
        <button style="margin-left: 20px;width: 160px;border-radius: 25px; color: #000; background-color: #c4cad3;">查看方案</button>
      </div>
      <div style="width: 50%; position: relative; left: 25%; top: 44%; ">＊首月需額外購買 NT$ 980 元的商品。</div>
    </div>
    <div style="margin-top: 80px;">
      <div style="font-size: 30px; font-weight: 700; text-align: center;">成為分店有什麼好處？</div>
      <div style="display: flex; justify-content: space-between; margin-top: 60px;">
        <div style="width: 23%; margin-left: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/1.svg" alt="">
          <div style="font-size: 30px; margin-top: 30px;">一支手機，即可開始網路創業。</div>
          <div style="color: #888; margin-top: 20px;">無需花費高金額創業，你可以用最符合網路的方式開始。</div>
        </div>
        <div style="width: 23%; margin-left: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/2.svg" alt="">
          <div style="font-size: 30px; margin-top: 30px;">隨時隨地都能為自己創造收益。</div>
          <div style="color: #888; margin-top: 20px;">無論是分享自己喜歡的商品，還是透過團隊擴大經營，你有更多創造自己收益的方式。</div>
        </div>
        <div style="width: 23%; margin-left: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/3.svg" alt="">
          <div style="font-size: 30px; margin-top: 30px;">販售所有你喜愛的商品。</div>
          <div style="color: #888; margin-top: 20px;">豐富多元的商品，任你販售，販售出去的商品，不需包貨出貨，品牌幫你搞定。</div>
        </div>
        <div style="width: 23%; margin-left: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/4.svg" alt="">
          <div style="font-size: 30px; margin-top: 30px;">輕鬆透過團隊擴大經營。</div>
          <div style="color: #888; margin-top: 20px;">經營團隊，讓未來的自己更省力，打造分店團隊，一鍵開始。</div>
        </div>
      </div>
    </div>
    <div style="margin-top: 30px; width: 100%; height: 740px; background-color:#fafafa;">
      <div style="font-size: 40px; font-weight: 700; text-align: center; position: relative; top: 50px;">選擇適合自己的分店方案。</div>
      <div style="display: flex; position: relative; top: 120px;">
        <div style="width: 23%; margin-left: 20px; height: 400px; padding: 20px 20px 10px 20px; border-radius: 30px; border: 1px solid #888;">
          <div style="position: absolute; top: -14px; left:252px ; text-align: center; line-height: 30px; width: 70px; height: 30px; background-color: #000; color: #fff; border-radius: 15px;">熱門</div>
          <div>分店月租費</div>
          <div style="margin-top: 20px;">每月</div>
          <div style="margin-top: 20px; font-size: 20px;">NT$ 1,980</div>
          <div style="margin-top: 20px; color: #888; padding-bottom:25px ; border-bottom: 1px solid #efefef;">可販售全部商品,且可以邀請夥伴加入。</div>
          <div style="display: flex; margin-top: 20px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">獨立分店網址</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">可販售全部商品</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">招募分店</div>
          </div>
          <button style="width: 90%; margin-left: 10px; margin-top: 15px; height: 40px; border-radius: 20px; border: 1px solid #000;">
            了解更多
          </button>
        </div>
        <div style="width: 23%; margin-left: 20px; height: 400px; padding: 20px 20px 10px 20px; border-radius: 30px; border: 1px solid #888;">
          <div>分店月租費－年繳</div>
          <div style="margin-top: 20px;"> 12 個月 </div>
          <div style="margin-top: 20px; font-size: 20px;"><span style="text-decoration: line-through;">NT$ 23,760</span><span style="margin-left: 10px; color: red;">NT$ 19,200</span></div>
          <div style="margin-top: 20px; color: #888; padding-bottom:25px ; border-bottom: 1px solid #efefef;">可販售全部商品,且可以邀請夥伴加入。</div>
          <div style="display: flex; margin-top: 20px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">獨立分店網址</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">可販售全部商品</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">招募分店</div>
          </div>
          <button style="width: 90%; margin-left: 10px; margin-top: 15px; height: 40px; border-radius: 20px; border: 1px solid #000;">
            了解更多
          </button>
        </div>
        <div style="width: 23%; margin-left: 20px; height: 400px; padding: 20px 20px 10px 20px; border-radius: 30px; border: 1px solid #888;">
          <div style="position: absolute; top: -14px; right:402px ; text-align: center; line-height: 30px; width: 70px; height: 30px; background-color: #000; color: #fff; border-radius: 15px;">最省</div>
          <div>分店月租費－低資費方案</div>
          <div style="margin-top: 20px;">每月</div>
          <div style="margin-top: 20px; font-size: 20px;">NT$ 780</div>
          <div style="margin-top: 20px; color: #888; padding-bottom:25px ; border-bottom: 1px solid #efefef;">可販售部分商品,不可以邀請夥伴加入。</div>
          <div style="display: flex; margin-top: 20px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">獨立分店網址</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 20px;">可販售全部商品</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark_inactive.png" alt="">
            <div style="margin-left: 20px;">招募分店</div>
          </div>
          <button style="width: 90%; margin-left: 10px; margin-top: 15px; height: 40px; border-radius: 20px; border: 1px solid #000;">
            了解更多
          </button>
        </div>
      </div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">首月需額外購買 NT$ 980 元的商品。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">訂閱後可在分店後台進行方案的更改。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">可隨時取消訂閱方案。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">如曾經招募分店，不可降為「不可招募」分店的方案。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">需先完成分店註冊才能進行方案選擇。</div>
    </div>
    <div style="text-align: center; padding-top: 50px;">
      <div style="font-size: 30px; font-weight: 700;">有問？有答。</div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店是什麼？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店如何計費？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店可以在哪裡使用？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>如何取消？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>可以在分店上使用什麼內容？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店適合沒經驗的人嗎？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
    </div>
    <div style="margin-top: 10px; margin-left: 10%; color: #888;">還有更多沒有回答到的問題？與我們聯絡。</div>
    <div style="text-align: center;margin-top: 200px; margin-bottom: 140px;">
      <div style="font-size: 50px; font-weight: 700;">一間分店，</div>
      <div style="font-size: 50px; font-weight: 700;">為未來開啟更多可能。</div>
      <button style="margin-top: 20px; width: 120px; background-color: #000; color: #fff;height: 50px; border-radius: 20px;">立即成為分店</button>
      <div style="margin-top: 20px; ">我還有更多疑問？與我們聯絡。</div>
    </div>
    </div>
    <div v-else>
      <!-- 头部 -->
      <div style="background-color: #c3cad4; width: 100%; height: 500px; margin-top: 0px;">
      <div style="width: 200px; position: relative; left: 10%; top: 20%; font-size: 25px; font-weight: 700;">成為分店，挑戰無限可能。</div>
      <div style="width: 200px; font-weight: 700; font-size: 16px; position: relative; left: 10%; top: 25%;">每月只需 NT$ 780 起，可隨時取消。</div>
      <div style="width: 250px; display: flex; position: relative; left: 10%; top: 29%; height: 50px; ">
        <button style="width: 160px; border-radius: 25px; color: #fff; background-color: #000;">立即成為分店</button>
        <button style="margin-left: 20px;width: 160px;border-radius: 25px; color: #000; background-color: #c4cad3;">查看方案</button>
      </div>
      <div style="width: 280px; position: relative; left: 10%; top: 34%; ">＊首月需額外購買 NT$ 980 元的商品。</div>
      </div>
      <!-- 如何成为分店 -->
      <div style="margin-top: 80px;">
      <div style="font-size: 30px; font-weight: 700; text-align: center;">成為分店有什麼好處？</div>
      <div style="margin-top: 60px; margin: 60 auto;">
        <div style="margin-left: 50%; transform: translateX(-50%);">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/1.svg" alt="">
          <div style="font-size: 20px; margin-top: 30px;">一支手機，即可開始網路創業。</div>
          <div style="color: #888; margin-top: 20px;">無需花費高金額創業，你可以用最符合網路的方式開始。</div>
        </div>
        <div style="margin-left: 50%;transform: translateX(-50%); margin-top: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/2.svg" alt="">
          <div style="font-size: 20px; margin-top: 30px;">隨時隨地都能為自己創造收益。</div>
          <div style="color: #888; margin-top: 20px;">無論是分享自己喜歡的商品，還是透過團隊擴大經營，你有更多創造自己收益的方式。</div>
        </div>
        <div style="margin-left: 50%;transform: translateX(-50%); margin-top: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/3.svg" alt="">
          <div style="font-size: 20px; margin-top: 30px;">販售所有你喜愛的商品。</div>
          <div style="color: #888; margin-top: 20px;">豐富多元的商品，任你販售，販售出去的商品，不需包貨出貨，品牌幫你搞定。</div>
        </div>
        <div style="margin-left: 50%;transform: translateX(-50%); margin-top: 20px;">
          <img style="margin-left: 50%; transform: translateX(-50%);" src="https://cdn.quickper.com/static/img/joinUs/description/4.svg" alt="">
          <div style="font-size: 20px; margin-top: 30px;">輕鬆透過團隊擴大經營。</div>
          <div style="color: #888; margin-top: 20px;">經營團隊，讓未來的自己更省力，打造分店團隊，一鍵開始。</div>
        </div>
      </div>
      </div>
      <!-- 选择适合自己的方案 -->
      <div style="margin-top: 30px; width: 100%; height: 740px; background-color:#fafafa;">
      <div style="font-size: 30px; margin-left: 10px; font-weight: 700; text-align: center; position: relative; top: 50px;">選擇適合自己的分店方案。</div>
      <div style="display: flex;overflow: hidden ; position: relative; top: 120px;">
        <swiper
          style="margin-left: 20px;display: flex;"
              :slides-per-view="1.7"
              :space-between="0"
              :autoplay="{delay: 3000}"
            >
        <swiper-slide style="display: block; width: 300px; margin-left: 20px; height: 420px; padding: 20px 20px 10px 20px; border-radius: 30px; border: 1px solid #888;">
          <div>分店月租費</div>
          <div style="margin-top: 20px;">每月</div>
          <div style="margin-top: 20px; font-size: 20px;">NT$ 1,980</div>
          <div style="margin-top: 20px; color: #888; padding-bottom:25px ; border-bottom: 1px solid #efefef;">可販售全部商品,且可以邀請夥伴加入。</div>
          <div style="display: flex; margin-top: 20px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">獨立分店網址</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">可販售全部商品</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">招募分店</div>
          </div>
          <button style="width: 100px; margin-left: 10px; margin-top: 15px; height: 40px; border-radius: 20px; border: 1px solid #000;">
            了解更多
          </button>
        </swiper-slide>
        <swiper-slide style="display: block; width: 300px; margin-left: 20px; height: 420px; padding: 20px 20px 10px 20px; border-radius: 30px; border: 1px solid #888;">
          <div>分店月租費</div>
          <div style="margin-top: 20px;">每月</div>
          <div style="margin-top: 20px; font-size: 20px;">NT$ 1,980</div>
          <div style="margin-top: 20px; color: #888; padding-bottom:25px ; border-bottom: 1px solid #efefef;">可販售全部商品,且可以邀請夥伴加入。</div>
          <div style="display: flex; margin-top: 20px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">獨立分店網址</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">可販售全部商品</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">招募分店</div>
          </div>
          <button style="width: 100px; margin-left: 10px; margin-top: 15px; height: 40px; border-radius: 20px; border: 1px solid #000;">
            了解更多
          </button>
        </swiper-slide>
        <swiper-slide style="display: block; width: 300px; margin-left: 20px; height: 420px; padding: 20px 20px 10px 20px; border-radius: 30px; border: 1px solid #888;">
          <div>分店月租費</div>
          <div style="margin-top: 20px;">每月</div>
          <div style="margin-top: 20px; font-size: 20px;">NT$ 1,980</div>
          <div style="margin-top: 20px; color: #888; padding-bottom:25px ; border-bottom: 1px solid #efefef;">可販售全部商品,且可以邀請夥伴加入。</div>
          <div style="display: flex; margin-top: 20px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">獨立分店網址</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">可販售全部商品</div>
          </div>
          <div style="display: flex; margin-top: 10px;">
            <img style="width: 20px; height: 20px; margin-top: 2px;" src="https://cdn.quickper.com/static/img/icons/check/correct_dark.png" alt="">
            <div style="margin-left: 10px;">招募分店</div>
          </div>
          <button style="width: 100px; margin-left: 10px; margin-top: 15px; height: 40px; border-radius: 20px; border: 1px solid #000;">
            了解更多
          </button>
        </swiper-slide>
        </swiper>
      </div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">首月需額外購買 NT$ 980 元的商品。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">訂閱後可在分店後台進行方案的更改。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">可隨時取消訂閱方案。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">如曾經招募分店，不可降為「不可招募」分店的方案。</div>
      <div style="position: relative; top: 130px; margin-left: 20px; color: #888;">需先完成分店註冊才能進行方案選擇。</div>
      </div>
      <!-- 有问有答 -->
      <div style="text-align: center; padding-top: 50px;">
      <div style="font-size: 30px; font-weight: 700;">有問？有答。</div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店是什麼？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店如何計費？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店可以在哪裡使用？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>如何取消？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>可以在分店上使用什麼內容？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      <div style="display: flex; justify-content: space-between; padding: 0 20px 0 20px; line-height: 70px; margin-top: 20px; margin-left: 50%; border-radius: 15px; transform: translateX(-50%); width: 80%; height: 70px; border: 1px solid #888;">
        <div>分店適合沒經驗的人嗎？</div>
        <img style="margin-top: 25px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/angle_up.svg" alt="">
      </div>
      </div>
      <div style="margin-top: 10px; margin-left: 10%; color: #888;">還有更多沒有回答到的問題？與我們聯絡。</div>
      <div style="text-align: center;margin-top: 200px; margin-bottom: 140px;">
        <div style="font-size: 30px; font-weight: 700;">一間分店，</div>
        <div style="font-size: 30px; font-weight: 700;">為未來開啟更多可能。</div>
        <button style="margin-top: 20px; width: 120px; background-color: #000; color: #fff;height: 50px; border-radius: 20px;">立即成為分店</button>
        <div style="margin-top: 20px; ">我還有更多疑問？與我們聯絡。</div>
      </div>
    </div>
    <KOfooter/>
  </div>
</template>

<style scoped lang="scss">
.POOL {
  // background: linear-gradient( to right, #160d35, #2f0a49);
  background-color: #fff;
  width: 100%;
  height: calc(100vh);
}
</style>